<template>
	<view class="theater">

		<u-navbar title="福利中心" :titleStyle="{color: '#fff'}" @rightClick="gotoPage('/pages/theater/rule')"
			bgColor="transparent" rightText="规则" :leftIcon="null"></u-navbar>

		<!--    <u&#45;&#45;image :showLoading="true" src="/static/theater/bg-2.png" width="100vw" height="100vh" class="bg"></u&#45;&#45;image>-->
		<!-- 头部 -->
		<view class="navBox">
			<view class="navBg">
				<view>
					<view class="" @click="gotoPage('/pages/theater/revenueRecords')">
						金币收益(币)
						<!--						<uni-icons type="right"></uni-icons>-->
					</view>
					<view class="navNum">
						<view>{{userInfo.balance || 0}}</view>
						<view class="conversion" @click="gotoPage('/pages/theater/conversion')">兑换</view>
					</view>
				</view>
				<view style="margin-left: 100rpx" @click="gotoPage('/pages/theater/revenueRecords')">
					<view class="">
						现金收益(元)
						<!--						<uni-icons type="right"></uni-icons>-->
					</view>
					<view class="navNum">
						{{userInfo.money / 100 || 0}}
					</view>
				</view>
				<view @click="gotoPage('/pages/theater/withdrawal')" style="margin-left: 80rpx" class="conversion">提现
				</view>
			</view>
		</view>
		<view class="swiper" v-if="swiperList.length > 0">
			<u-swiper :list="swiperList" @change="(e) => swiperCurrnet = e.current" keyName="image" @click="swiperClick"
				indicator indicatorMode="dot" indicatorActiveColor="#FE9E5A" circular :autoplay='true'
				height='240'></u-swiper>
		</view>
		<!-- 签到任务 -->
		<view class="taskBox">
			<view class="taskTitle">
				<view class="titleLeft">
					<image src="../../static/theater/taskIcon.png" mode=""></image>日常任务
				</view>
				<view class="titleRight">
					<image src="../../static/theater/taskRightIcon.png" mode=""></image>
				</view>
			</view>
			<view class="signBox">
				<view class="signBoxl">
					<view class="signBoxlt">
						<view class="signBoxll">签到</view>
						<view class="signBoxlr">
							<image src="../../static/theater/play.png" mode=""></image>
							<view class="signBoxlrtext">
								{{list[num].bean}}
							</view>
						</view>
					</view>
					<view class="signBoxlb">连续签到7天可得{{he}}金币</view>
				</view>
				<view class="signBoxr" :class="tag?'hui':''" @click="receive">
					{{sign?"已签到":'签到'}}
				</view>
			</view>
			<view class="signBox top">
				<view class="signBoxl">
					<view class="signBoxlt">
						<view class="signBoxll">看短剧赚金币</view>
						<view class="signBoxlr">
							<image src="../../static/theater/play.png" mode=""></image>
							<view class="signBoxlrtext">
								{{lotteryList.filter((item,index) => index === lottery)[0].amount}}
							</view>
						</view>
					</view>
					<view class="signBoxlb">观看短剧可领取金币</view>
				</view>
				<view class="signBoxr" @click="goIndex">领取</view>
			</view>
			<view class="scrolllist">
				<scroll-view class="scroll-X" scroll-x="true">
					<view style="display: flex;">
						<view class="scroll" v-for="(item,index) in lotteryList" :key="index">
							<view class="scrollitem" v-if="index > lottery">
								<view class="amount" style="top: 66rpx;">{{item.amount}}</view>
							</view>
							<view class="scrollitem" v-if="index === lottery && time < item.time">
								<view class="amount" style="top: 60rpx;font-size: 20rpx">
									{{parseInt(item.amount / item.time * time)}}/{{item.amount}}
								</view>
								<progress :percent="time * (100 / item.time)" activeColor="#FFC879"
									style="width: 70%;position: absolute;top: 90rpx;left: 50%;transform: translate(-50%);" />
							</view>
							<view class="scrollitem scrollitemOut" v-if="index === lottery && time >= item.time">
								<view class="amount" style="top: 10rpx;color: #FD3018;">{{item.amount}}</view>
							</view>
							<view class="scrollitem scrollitemIn" v-if="index < lottery">
								<view class="amount" style="top: 10rpx;color: #FD3018;">{{item.amount}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="signBox top">
				<view class="signBoxl">
					<view class="signBoxlt">
						<view class="signBoxll">
							看小视频领金币
						</view>
						<view class="signBoxlr" v-if="seenum !== seetotal">
							<image src="../../static/theater/play.png" mode=""></image>
							<view class="signBoxlrtext">
								{{bindnum}}
							</view>
						</view>
					</view>
					<view class="signBoxlb">观看小视频，得丰厚金币奖励</view>
				</view>
				<view class="signBoxr" @click="tosee">去观看</view>
			</view>
			<view class="progress">
				<progress :percent="seenum * (100 / seetotal)" style="width: 35%" />
				<view class="progressword">{{seenum}}/{{seetotal}}次</view>
			</view>


		</view>
		<view class="taskBox">
			<view class="taskTitle">
				<view class="titleLeft">
					<image src="../../static/theater/taskIcon.png" mode=""></image>大额专区
				</view>
				<!-- <view class="titleRight">
					<image src="../../../static/theater/taskRightIcon.png" mode=""></image>
				</view> -->
			</view>
			<view class="signBox top">
				<view class="signBoxl">
					<view class="signBoxlt">
						<view class="signBoxll">邀请好友赚金币</view>
						<!-- <view class="signBoxlr">
							<image src="../../static/theater/play.png" mode=""></image>
							<view class="signBoxlrtext">
								376
							</view>
						</view> -->
					</view>
					<view class="signBoxlb">新朋友众多，先拉先得</view>
				</view>
				<view class="signBoxr" @click="gotoPage('/pages/Personal/invite')">去参与</view>
			</view>
		</view>
		<uni-popup ref="popup" v-model="tag" :mask-click="true" mode="center">
			<view class="popupk">
				<image class="popupkimg2" src="../../static/theater/image.png" mode=""></image>
				<view class="popupktop">
					<image src="../../static/theater/calendar.png" mode=""></image>
					<view class="popupktopword">你已连续签到<text>{{num}}</text>天</view>
				</view>
				<view class="popupkc">连续签到7天领惊喜礼包</view>
				<view class="popupkcklist">
					<view class="popupkck" v-for="(item,index) in list" :key="index">
						<view class="popupkckitem">
							<view class="popupkckitemt">
								{{item.bean}}
							</view>
							<image src="../../static/theater/play.png" mode=""></image>
						</view>
						<view class="popupkckitemword">{{item.day}}天</view>
					</view>
				</view>
				<view class="popupbtn" @click="signin">
					{{sign?"已签到":'签到'}}
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="adShow" :mask-click="true" mode="center">
			<view class="adBox">
				<view class="ad_title">是否观看广告</view>
				<view class="btn_box">
					<view @click="closeAd" style="background-color:#C4C4C4;">否</view>
					<view @click="openAd" style="background-color:#E81F4B;">是</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		Api
	} from "../../service/api";
	import {
		gotoPage
	} from "../../utils/common";
	import TopBar from "../../components/TopBar.vue";
	export default {
		components: {
			TopBar
		},
		data() {
			return {
				tag: false,
				sign: false,
				num: 0,
				list: [{
					bean: 0
				}],
				userInfo: {},
				he: "",
				seetotal: null,
				seenum: null,
				bindnum: 0,
				binddata: [],
				lottery: 0,
				lotteryList: [{
					amount: 0
				}],
				time: Number(uni.getStorageSync('time')),
				swiperList: [],
				swiperCurrnet: 0,
				musicData: null
			}
		},
		async onShow() {
			this.userInfo = await this.getInfoMethod()
			this.time = Number(uni.getStorageSync('time'))
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中'
			})
			await this.getSignList()
			await this.getAdSurplusDetail()
			await this.getSignInTodayStatus()
			await this.getAwardListBySignIn()
			await this.getAwardListByLottery()
			await this.swiper()
			uni.hideLoading()
			this.musicData = uni.createInnerAudioContext(); //创建播放器对象
			this.musicData.src = '/static/gold.mp3' // static文件夹下的音频
		},
		methods: {
			...mapActions('userInfo', ['getInfoMethod']),
			...mapActions('appInfo', ['getAppConfigMethod', 'getAppInfoMethod']),
			...mapMutations('userInfo', ['setInfoMethod']),
			gotoPage,
			// 查询签到状态
			getSignInTodayStatus() {
				Api.getSignInTodayStatus().then(res => {
					this.sign = res.data.todaySign;
					this.num = res.data.signNum || 0;
				})
			},
			// 签到弹窗
			receive() {
				this.$refs.popup.open('center')
			},
			// 查询签到配置列表
			getSignList() {
				Api.getSignList().then(res => {
					this.list = res.data
					this.he = this.list.reduce((accumulator, currentObject) => {
						return accumulator + currentObject.bean;
					}, 0);
				})
			},
			// 签到
			signin() {
				Api.signIn().then(async res => {
					if (res.data) {
						uni.showToast({
							title: '签到成功',
							icon: 'success',
						});
						this.sign = true
						this.num += 1
						const {
							data
						} = await Api.getUserBean()
						this.userInfo.balance = data
						console.log(this.userInfo, data, 'this.userInfo');
						this.setInfoMethod(this.userInfo)
						this.playMusic()
						this.$refs.popup.close()
					}
				})
			},
			// 看广告
			tosee() {
				if (this.seenum >= this.seetotal) {
					uni.showToast({
						title: '无观看次数',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.$refs.adShow.open('center')
			},
			async handle() {
				let appConfig = await this.getAppConfigMethod()
				let params = {
					changeReason: appConfig.appName + '金币广告',
					adId: 'ivsxdrf7272o9rjo2l',
					type: 1,
					rewardId: this.binddata[this.seenum].id,
					rewardName: this.binddata[this.seenum].name,
					rewardType: this.binddata[this.seenum].type,
					rewardAmount: this.binddata[this.seenum].amount, //奖励数量
				}
				Api.advertisementCreate(params).then(async res => {
					this.seenum += 1
					if (this.seenum !== this.seetotal) this.bindnum = this.binddata[this.seenum].amount
					const {
						data
					} = await Api.getUserBean()
					this.userInfo.balance = data
					this.setInfoMethod(this.userInfo)
					this.playMusic()
				})
			},
			// 分类获取用户广告观看记录
			async getAdSurplusDetail() {
				let res = await Api.getAdSurplusDetail()
				this.seenum = res.data.signIn
				this.lottery = res.data.lottery
				// this.lottery = 1
			},
			// 获取广告签到奖励
			async getAwardListBySignIn() {
				let res = await Api.getAwardListBySignIn()
				this.seetotal = res.data.length
				this.binddata = res.data
				if (this.seenum < this.binddata.length) {
					this.bindnum = this.binddata[this.seenum].amount
				}
			},
			// 获取观看短剧奖励列表
			async getAwardListByLottery() {
				let res = await Api.getAwardListByLottery()
				this.lotteryList = res.data
			},
			// 领取观看短剧奖励
			goIndex() {
				this.lotteryList.forEach((item, index) => {
					if (index === this.lottery) {
						if (this.time >= item.time) {
							let str = uni.getStorageSync('appConfig')
							let params = {
								changeReason: str.appName + '观看短剧奖励',
								adId: 'ivsxdrf7272o9rjo2l',
								type: 2,
								rewardId: item.id,
								rewardName: item.name,
								rewardType: item.type,
								rewardAmount: item.amount, //奖励数量
							}
							Api.advertisementCreate(params).then(async res => {
								this.lottery += 1
								const {
									data
								} = await Api.getUserBean()
								this.userInfo.balance = data
								console.log(this.userInfo, data, 'this.userInfo');
								this.setInfoMethod(this.userInfo)
								this.playMusic()
								uni.showToast({
									title: '领取成功',
									icon: 'success',
									duration: 2000
								});
							})
						} else {
							// uni.showToast({
							//   title: '观看时长不足，去剧场看剧吧',
							//   icon: 'none',
							//   duration: 1500
							// });
							// setTimeout(() => {
							uni.switchTab({
								url: '/pages/benefit/index'
							})
							// },1500)
						}
					}
				})
			},
			// 关闭广告弹窗
			closeAd() {
				this.$refs.adShow.close()
			},
			// 显示广告
			async openAd() {
				this.$refs.adShow.close()
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 5000);
				// 显示激励广告
				// let appConfig = await this.getAppConfigMethod()
				// await this.handle()
				// uni.showToast({
				// 	title: '观看广告成功',
				// 	icon: 'none'
				// })
			},
			swiper() {
				Api.swiper().then(res => {
					this.swiperList = res.data
				})
			},
			swiperClick(index) {
				let item = this.swiperList[index]
				console.log(item);
				uni.navigateToMiniProgram({
					appId: item.linkAppid,
					path: item.path,
					success(res) {
						// 打开成功
						uni.showToast({
							title: '跳转成功'
						})
					},
					fail(err) {
						console.log(err)
						// 打开失败/取消
						uni.showToast({
							title: '跳转不成功'
						})
					}
				})
				// gotoPage(`/pages/player/player?tt_album_id=${item.albumId}&tt_episode_id=0&tvId=${item.tvId}`)
			},
			// 播放音效
			playMusic() {
				// 1为打开
				if (!uni.getStorageSync('msg') || uni.getStorageSync('msg') === 1) this.musicData.play(); //执行播放
			}
		},
	}
</script>

<style lang="scss" scoped>
	progress {
		overflow: hidden;
		border-radius: 30rpx;
	}

	.theater {
		padding: 30rpx 28rpx 0;
		//background-color: #F1F7FC;
		height: 100vh;
		//overflow: hidden;
		//position: relative;
		//z-index: 1;
		background-image: url("https://hanchenwh.oss-cn-shenzhen.aliyuncs.com/993cbff4dfe63ac432a899a9824c096b44820563033335d8ed37a086fd9eaad2.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;


		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}



		.navBox {
			width: calc(100% - 40rpx);
			height: 162rpx;
			color: #FFFFFF;
			border-radius: 28rpx;
			padding: 6rpx 10rpx;
			text-align: right;
			position: relative;
			background-size: 100% 100%;
			background-image: url("/static/theater/wallet_bg.png");
			background-repeat: no-repeat;
			font-size: 28rpx;
			margin-top: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.navBg {
				width: 100%;
				color: #2A2A2A;
				text-align: left;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				float: left;
				position: relative;
				margin-left: 50rpx;
				margin-top: 20rpx;

				.conversion {
					padding: 7rpx 20rpx;
					border-radius: 30rpx;
					background-color: #E81F4B;
					color: #ffffff;
					font-size: 24rpx;
					margin-left: 20rpx;
				}

				//&::after {
				//	content: '';
				//	width: 2rpx;
				//	height: 22rpx;
				//	position: absolute;
				//	left: 50%;
				//	top: 50%;
				//	transform: translate(-50%, -50%);
				//	background-color: #ABABAB;
				//}

				.navNum {
					font-size: 40rpx;
					font-weight: 700;
					display: flex;
					align-items: center;
				}
			}
		}

		.swiper {
			width: 686rpx;
			height: 246rpx;
			border-radius: 20rpx;
			margin: 20rpx 0;
			overflow: hidden;
		}

		.taskBox {
			background-color: #FFFFFF;
			width: calc(100% - 40rpx);
			// height: 616rpx;
			padding: 22rpx 18rpx;
			border-radius: 24rpx;
			margin-top: 28rpx;

			.taskTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.titleLeft {
					font-size: 36rpx;
					font-weight: 700;
					color: #2A2A2A;

					image {
						width: 46rpx;
						height: 44rpx;
						vertical-align: text-bottom;
					}
				}

				.titleRight {

					image {
						width: 80rpx;
						height: 88rpx;
					}
				}
			}

			.signBox {
				display: flex;
				justify-content: space-between;

				.signBoxl {
					.signBoxlt {
						display: flex;
						align-items: center;

						.signBoxll {
							font-size: 28rpx;
							font-weight: 700;
						}

						.signBoxlr {
							// width: 80rpx;
							height: 36rpx;
							border-radius: 162rpx;
							background-color: rgb(254, 234, 239);
							display: flex;
							align-items: center;
							margin-left: 7rpx;
							padding: 0 10rpx;

							image {
								width: 26rpx;
								height: 26rpx;
								margin-left: 5rpx;
							}

							.signBoxlrtext {
								font-size: 24rpx;
								color: #E81F4B;
								margin-left: 5rpx;
							}
						}
					}

					.signBoxlb {
						font-size: 22rpx;
						color: #8B8B8B;
					}

				}

				.signBoxr {
					width: 132rpx;
					height: 56rpx;
					border-radius: 40rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					background-color: #E81F4B;
					text-align: center;
					line-height: 56rpx;
				}

				.hui {
					background-color: #D0D0D0;
				}
			}

			.top {
				margin-top: 40rpx;
			}

			.scrolllist {
				display: flex;
				align-items: center;
				overflow-x: scroll;

				.scroll {
					// width: 78rpx;
					// height: 89rpx;
					background: linear-gradient(to bottom, #FD6118, #FD3018);
					margin-top: 20rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;

					.scrollitem {
						position: relative;
						width: 98rpx;
						height: 119rpx;
						background: url("/static/theater/blod.png") no-repeat;
						background-size: 100% 100%;

						.amount {
							color: #ffffff;
							font-size: 24rpx;
							position: absolute;
							width: 100%;
							text-align: center;
							left: 50%;
							transform: translate(-50%);
						}

					}

					.scrollitemOut {
						background: url("/static/theater/blod_out.png") no-repeat;
						background-size: 100% 100%;
					}

					.scrollitemIn {
						background: url("/static/theater/blod_in.png") no-repeat;
						background-size: 100% 100%;
					}

				}
			}

			.scrolllist::-webkit-scrollbar {
				display: none;
			}

			.progress {
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				::v-deep.uni-progress {
					width: 152rpx !important;
				}

				.progressword {
					font-size: 20rpx;
					color: #8B8B8B;
					margin-left: 20rpx;
				}
			}
		}

		.popupk {
			width: 640rpx;
			height: 482rpx;
			position: relative;
			background: url('../../static/theater/Rectangle.png') no-repeat;
			background-size: 100%;
			padding: 30rpx;

			.popupkimg1 {
				width: 688rpx;
				height: 482rpx;
			}

			.popupkimg2 {
				width: 202rpx;
				height: 228rpx;
				position: absolute;
				top: -80rpx;
				right: 0;
			}

			.popupktop {
				display: flex;
				align-items: center;

				image {
					width: 92rpx;
					height: 74rpx;
				}

				.popupktopword {
					font-size: 32rpx;

					text {
						color: #FF7B35;
					}
				}
			}

			.popupkc {
				font-size: 24rpx;
				margin-top: 3rpx;
				margin-bottom: 9rpx;
			}

			.popupkcklist {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.popupkck {
					width: 64rpx;
					height: 106rpx;
					background: url('../../static/theater/ju.png');
					background-repeat: no-repeat;
					background-size: 100%;

					.popupkckitem {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.popupkckitemt {
							color: #FFFFFF;
							font-size: 24rpx;
							font-weight: 700;
							margin-top: 7rpx;
						}

						image {
							width: 42rpx;
							height: 40rpx;
							margin-top: 5rpx;
						}
					}

					.popupkckitemword {
						margin-top: 36rpx;
						font-size: 20rpx;
						text-align: center;
					}
				}
			}

			.popupbtn {
				width: 438rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				background-color: #E81F4B;
				color: #FFFFFF;
				border-radius: 196rpx;
				margin-top: 80rpx;
				margin-left: 120rpx;
			}

		}
	}

	.adBox {
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 30rpx;
		width: 410rpx;

		.ad_title {
			text-align: center;
		}

		.btn_box {
			display: flex;
			justify-content: space-between;
			margin-top: 80rpx;
			padding: 0 40rpx;

			view {
				width: 90rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				border-radius: 30rpx;
				font-size: 24rpx;
			}
		}
	}
</style>